﻿{extend name="public:base" /}

{block name="css"}
<style lang="less">
    .top-main {
        width: 96%;
        display: flex;
        justify-content: space-between;

        .btn-main {
            display: flex;
            justify-content: flex-start;
        }

        .search-form {
            display: flex;
            justify-content: flex-end;
            padding-right: 0;
        }

    }

    .screen-box {
        display: flex;

        .btn {
            margin-left: 10px;
        }
    }

    .btn-box {
        display: flex;
        justify-content: flex-end;
        flex: 1;
        flex-shrink: 0;
        margin-left: 5px;

        .btn {
            padding: 2px 8px;
            border-radius: 6px;
            background: #1ab394;
            color: #fff;
        }

        .ai-btn {
            background: #fa9d3b;
            margin: 0 5px;
        }
    }

    .comment-box {
        display: flex;
        flex-direction: column;

        .textarea {
            outline: none;
            padding: 4px;
            border-radius: 5px;
        }

        .btn {
            padding: 2px 8px;
            border-radius: 6px;
            background: #1ab394;
            color: #fff;
            margin-top: 10px;
        }
    }

    .ibox-title {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background-color: #ffffff;
        border-color: #e7eaec;
        border-image: none;
        border-style: solid solid none;
        border-width: 2px 0 0;
        color: inherit;
        margin-bottom: 0;
        padding: 15px 30px 8px 15px;
        min-height: 48px;
        position: relative;
        clear: both;
    }
</style>{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">

                    <div class="top-main">
                        <div class="btn-box btn-main">
                            <button onclick="updateVideoAndComment()" class="update-btn btn btn-primary">评论数据一键同步</button>
                            <button class="btn ai-btn" onclick="AICommonQuickReplyAll()">AI一键优化</button>
                            <button class="btn" onclick="sendCommentAll()">一键发送评论</button>
                        </div>

                        <div class="screen-box search-form col-lg-10">
                            <select class="select form-control col-sm-5" name="video_id" style="margin-left: 5px">
                                {volist name="video_list" id="vo"}
                                <option value="{$vo.id}" {$vo.id== input(
                                'video_id') ? 'selected' : ''}>{$vo.id}、{$vo.description}</option>
                                {/volist}
                            </select>

                            <select class="select form-control col-sm-2" name="is_reply" style="margin-left: 10px">
                                <option value="0" {input(
                                'is_reply') == 0 ? 'selected' : ''}>未回复</option>
                                <option value="1" {:input(
                                'is_reply') == 1 ? 'selected' : ''}>已回复</option>
                            </select>

                            <button type="button" class="btn btn-primary btn-lg screen-btn">搜索</button>
                        </div>
                    </div>
                </div>

                <div class="ibox-content">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <tr>
                                <th width="5%"><input type="checkbox" id="checkAll"/></th>
                                <th width="10%">视频缩略图</th>
                                <th width="15%">视频简介</th>
                                <th width="15%">评价内容</th>
                                <th width="25%">快捷回复</th>
                                <th width="30%">回复内容</th>
                            </tr>
                            {volist name="list" id="vo" key="index"}
                            <tr>
                                <td>
                                    <input type="checkbox" class="check" data-id="{$vo.id}" name="index[]" value="{$index-1}"/>
                                </td>
                                <td>
                                    <img src="{$vo.video_thumbUrl}" style="width: 50px; height: 70px; object-fit: cover; border-radius: 5px"/>
                                </td>
                                <td>{$vo.video_description}</td>
                                <td>{$vo.commentContent}</td>
                                <td>
                                    <div style="display: flex">
                                        <select class="form-control quick-select" style="width: 270px;">
                                            {volist name="vo.reply_list" id="v"}
                                            <option value="{$v.id}">{$v.msg}</option>
                                            {/volist}
                                        </select>
                                        <div class="btn-box">
                                            <button class="btn ai-btn" onclick="useAIMsg({$vo.id}, {$index-1})">AI优化</button>
                                            <button class="btn" onclick="useMsg({$vo.id}, {$index-1})">使用</button>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="comment-box">
                                        <textarea class="textarea" rows="5" cols="40">{$vo.AIMsg}</textarea>
                                        <input type="hidden" class="quick-reply-id" value="0">
                                        <button class="btn" onclick="saveAIMsg({$vo.id}, {$index-1})" style="background: #fa9d3b;">保存回复内容</button>
                                        <button class="btn" onclick="sendComment('{$vo.commentId}', {$index-1})">发送评论</button>
                                    </div>
                                </td>
                            </tr>
                            {/volist}
                        </table>
                        {if !empty($list)}{$list->render()}{/if}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<script>
    $('#checkAll').click(function () {
        if ($(this).prop('checked')) {
            $('.check').prop('checked', true);
        } else {
            $('.check').prop('checked', false);
        }
    })

    // AI一键优化
    function AICommonQuickReplyAll() {
        var index_arr = [];
        $('input[name="index[]"]:checked').map(function () {
            index_arr.push($(this).val());
        })

        if (index_arr.length == 0) {
            layer.msg('请选择需要优化的评论', {icon: 2, time: 1000})
            return;
        }

        var ids = [];
        var quick_ids = [];
        index_arr.forEach(index => {
            ids.push($('.check').eq(index).data('id'))
            quick_ids.push($('.quick-select').eq(index).val())
        })

        layer.load(1)

        $.post('/index/Api/AICommonQuickReplyAll', {
            ids, quick_ids
        }, res => {
            layer.closeAll()

            if (res.result == 1) {
                layer.msg(res.msg, {icon: 1, time: 1000}, () => {
                    window.location.reload();
                })
            } else {
                layer.msg(res.msg, {icon: 2, time: 1000})
            }
        }, 'json')
    }

    // 一键发送评论
    function sendCommentAll() {
        var index_arr = [];
        $('input[name="index[]"]:checked').map(function () {
            index_arr.push($(this).val());
        })

        if (index_arr.length == 0) {
            layer.msg('请选择评论', {icon: 2, time: 1000})
            return;
        }

        var ids = [];
        index_arr.forEach(index => {
            ids.push($('.check').eq(index).data('id'))
        })

        layer.load(1)

        new Promise(resolve => {
            $.post('/index/Api/sendCommentAll', {
                ids
            }, res => {
                layer.closeAll()
                if (res.result == 1) {
                    layer.msg(res.msg, {icon: 1, time: 1000}, () => {
                        var exportId = res.data;
                        layer.msg(res.msg, {icon: 1, time: 1000});
                        resolve(exportId);
                    });
                } else {
                    layer.msg(res.msg, {icon: 2, time: 1000})
                }
            }, 'json')
        }).then((exportId) => {
            layer.msg('评论更新中...', {icon: 1, time: 1000});
            layer.load(1);

            $.post('/index/Api/videoCommentList', {
                exportId
            }, res => {
                layer.closeAll();
                if (res.result == 1) {
                    layer.msg(res.msg, {icon: 1, time: 1000}, () => {
                        window.location.reload();
                    });
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'json')
        })

    }

    // AI优化
    function useAIMsg(comment_id, index) {
        var select = $('.quick-select').eq(index),
          quick_id = select.find('option:selected').val(),// 快捷回复id
          msg = select.find('option:selected').text();

        if (!msg) {
            layer.msg('AI回复失败', {icon: 2});
            return false;
        }

        layer.load(1);

        $.post('/index/Api/AIQuickReply', {
            msg
        }, res => {
            layer.closeAll();
            if (res.result == 1) {
                $('.quick-reply-id').eq(index).val(quick_id);
                $('.textarea').eq(index).val(res.data);
            } else {
                layer.msg(res.msg, {icon: 2});
            }
        }, 'json')
    }

    // 使用快捷回复
    function useMsg(comment_id, index) {
        var select = $('.quick-select').eq(index),
          quick_id = select.find('option:selected').val(),// 快捷回复id
          msg = select.find('option:selected').text();

        $('.quick-reply-id').eq(index).val(quick_id);
        $('.textarea').eq(index).val(msg);
        $('.textarea').eq(index).data('value', msg);
    }

    // 保存回复内容
    function saveAIMsg(id, index) {
        var msg = $('.textarea').eq(index).val();

        layer.load(1);

        $.post('/index/Api/saveComment', {
            id, msg
        }, res => {
            layer.closeAll();
            layer.msg(res.msg, {icon: 1, time: 1000})
        }, 'json')
    }

    // 发送评论
    function sendComment(commentId, index) {
        var quickReplyId = $('.quick-select').eq(index).find('option:selected').val();
        var msg = $('.textarea').eq(index).val();

        if (!commentId) {
            layer.msg('发送评论失败', {icon: 2});
            return false;
        }

        if (!msg) {
            layer.msg('请输入回复内容', {icon: 2});
            return false;
        }

        layer.load(1);

        new Promise(resolve => {
            $.post('/index/Api/comment', {
                commentId, msg, quickReplyId
            }, res => {
                layer.closeAll();
                if (res.result == 1) {
                    layer.msg(res.msg, {icon: 1, time: 1000}, () => {
                        var exportId = res.data;
                        layer.msg(res.msg, {icon: 1, time: 1000});
                        resolve(exportId);
                    });
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'json')
        }).then((exportId) => {
            layer.msg('评论更新中...', {icon: 1, time: 1000});
            layer.load(1);

            $.post('/index/Api/videoCommentList', {
                exportId
            }, res => {
                layer.closeAll();
                if (res.result == 1) {
                    layer.msg(res.msg, {icon: 1, time: 1000}, () => {
                        window.location.reload();
                    });
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'json')
        })


    }

</script>{/block}